<!-- 小白同学这个页面逻辑层 就不要乱改了，默认就好，有钱的根据自己业务进行相应修改 -->

<template>
	<view>
		<view class="tui-tag tui-light-brownish tui-tag-fillet-right" style="width: 80%;margin-top: 20rpx;">没有打开支付宝，点击下方保存二维码扫码付款</view>
				<view class="detail">
					<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode" @tap="sheng"></canvas>
					<text class="money">实付款: {{paydata.money}} 元</text>
					<view class="trade">
						<tui-list-cell :hover="true" @tap="onisshow">
							<text class="tui-list-cell-name">订单信息</text>
							<tui-tag size="small" type="light-blue" shape="circle" class="tui-right">{{isshowtext}}</tui-tag>
						</tui-list-cell>
						<view class="isshow" v-show="isshow">
							<tui-list-cell :hover="true">
								<text class="tui-list-cell-name">订单号</text>
								<tui-tag size="small" type="light-orange" shape="circle" class="tui-right">{{paydata.trade_no}}</tui-tag>
							</tui-list-cell>
							<tui-list-cell :hover="true">
								<text class="tui-list-cell-name">商品名称</text>
								<tui-tag size="small" type="light-orange" shape="circle" class="tui-right">{{paydata.sitename}}</tui-tag>
							</tui-list-cell>
						</view>
						
					</view>
				</view>
				<tui-list-view title="选择支付方式" class="tui-list-view">
					<tui-list-cell  :arrow="true" class="tui-list">
						<image src="../../static/img/pay/zhifubao.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
						<text class="tui-list-cell-name">支付宝</text>
						<tui-tag size="small" type="light-green" shape="circle" class="tui-right">已选择</tui-tag>
					</tui-list-cell>
					<tui-list-cell  :arrow="true" class="tui-list">
						<image src="../../static/img/pay/weixin.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
						<view class="tui-list-cell-name">微信</view>
						<tui-tag size="small" type="btn-gray" shape="circle" class="tui-right">未开通</tui-tag>
					</tui-list-cell>
					<tui-list-cell  :arrow="true" class="tui-list">
						<image src="../../static/img/pay/yue.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
						<view class="tui-list-cell-name">余额</view>
						<tui-tag size="small" type="btn-gray" shape="circle" class="tui-right">未开通</tui-tag>
					</tui-list-cell>
				</tui-list-view>
				<view class="gopaybtn">
					<a class="tui-btn-class tui-btn tui-btn-block tui-primary tui-fillet tui-text" :href=" 'alipays://platformapi/startapp?appId=20000067&url='+paydata.qrurl">立即支付</a>
				</view>
	</view>
</template>

<script>
	
	/* 小白同学这个页面就不要乱改了，默认就好，有钱的根据自己业务进行相应修改 */
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import config from '../../common/config.js'
	import tuiTag from "@/components/tag/tag"
	import qrCode from 'weapp-qrcode';
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiTag,
		},
		data() {
			return {
				paydata:{},
				isshow:false,
				isshowtext:"点击查看",
				ispay:false,
				timr:""
			}
		},
		methods: {
			sheng(){
				uni.showModal({
				    title: '提示',
				    content: '点击确定保存二维码到本地，打开支付宝扫一扫付款',
				    success: function (res) {
				        if (res.confirm) {
				           var _this = this;
				           uni.canvasToTempFilePath({
				             x: 0,
				             y: 0,
				             width: 200,
				             height: 200,
				             destWidth: 200,
				             destHeight: 200,
				             canvasId: 'myQrcode',
				             success: (res)=> {
				               // 在H5平台下，tempFilePath 为 base64
				               console.log(res.tempFilePath)
				           	   // this.imgsrc = res.tempFilePath;
							   plus.gallery.save( res.tempFilePath, function () {
							   		uni.showToast({
							   		    title: '二维码保存成功',
							   		    duration: 2000
							   		});
							   	} );
				             } 
				           })
						   
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			onisshow(){
				if(this.isshow){
					this.isshowtext = "点击查看"
				}else{
					this.isshowtext = "点击收起"
				}
				this.isshow = !this.isshow;
			}
			
		},
		onLoad(option){
			this.paydata = JSON.parse(option.paydata);
			 // encodeURI(option.paydata) 		
		},
		onShow(){
			if(this.ispay){
			console.log("已支付");
			}
		},
		onBackPress(options) {  
		            if (options.from === 'backbutton ') {  
		                clearInterval(this.timr)
		            }else{
						clearInterval(this.timr)
					}   
		        }, 
		onReady(){
			// 二维码生成
			qrCode({
			  width: 200,
			  height: 200,
			  canvasId: "myQrcode",
			  text: this.paydata.qrurl,
			  
			})
			var n = 0;
			var timr = setInterval(()=>{
				uni.request({
				    url: config.queryapi,
				    data: {
				        trade_no: this.paydata.trade_no
				    },
				    header: {
				        // 'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
						if(res.data.ok == 1){
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								success:()=>{
									this.ispay = true;
									clearInterval(timr)
									uni.redirectTo({
										url:config.return_url
									})
								}
							});
						}    
				    }
				});
				n++;
				if(n>60){//支付超时 5 分钟
					clearInterval(timr)
				}
			},5000)
			this.timr = timr;
		}
	}
</script>

<style>
	@import '../../static/style/thorui.css';
	page{
		background-color: #FFFFFF;
	}
	canvas{
		margin: 60rpx auto;
		margin-bottom: 20rpx;
		}
	.detail{
		text-align: center;
	}
	.detail .money{
		font-size: 40rpx;
		font-weight: 700;
	}
	.detail .trade{
		
	}
	.detail .trade .isshow{
		height: 70rpx;
		transition:height 2s linear;
	}
	.qrcode-box {
		width: 100%;
		border-bottom: 1upx dashed #eaeef1;
		margin-bottom: 6upx;
	}
	.qrcode {
		width: 260upx;
		height: 260upx;
		margin: 45upx auto 43upx auto;
	}
	
	/* 按钮部分 */
	.gopaybtn{
		text-align: center;
	}
	.tui-primary {
		background: #5677fc !important;
		color: #fff;
	}
	.tui-text{
		text-decoration: none;
		text-align: center;
	}
	.tui-btn {
		margin: 50rpx auto;
		width: 70%;
		position: relative;
		border: 0 !important;
		border-radius: 10rpx;
		display: inline-block;
	}
	.tui-btn-block {
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	/*圆角 */
	
	.tui-fillet {
		border-radius: 45rpx;
	}
	/* 列表部分 */
	.tui-list-view {
		padding-top: 40upx !important
	}
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-list::after {
		left: 94upx !important
	}
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	
	/* 底部支付栏 */
	.container {
	  padding: 30upx 0 80upx 0;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	
	.tui-padding {
	  padding: 0 30upx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	
	.tui-title {
	  padding: 55upx 0 30upx 0;
	  font-size: 32upx;
	  color: #333;
	  font-weight: bold
	}
	
	.tui-flex {
	  align-items: center;
	}
	
	.tui-triangle {
	  margin-right: 30upx;
	}
	.tui-checkbox{
	  margin-left: 60upx;
	}
	.tui-top40 {
	  margin-top: 40upx;
	}
</style>
